
<template>
  <el-dialog v-model="ifShow" title="提现" width="1000" :before-close="handleCancel">
    <div class="box">
      <div class="item" v-if="supplierInfo.withdrawAccount">
        <div class="label">提现账号: {{ supplierInfo.withdrawAccount }}</div>
      </div>
      <div class="item" v-if="supplierInfo.withdrawName">
        <div class="label">提现户名: {{ supplierInfo.withdrawName }}</div>
      </div>
      <el-button style="margin-left: 16px" type="primary" @click="handleUpdateAccount()">修改提现账号</el-button>
    </div>

    <el-dialog style="margin-top: 100px" v-model="ifShow2" title="修改账号" width="600">
      <div class="">
        <div>
          <div class="label">提现账号</div>
          <el-input style="width: 240px" v-model="userFormData.withdrawAccount" placeholder="请输入账号"></el-input>
        </div>
        <div>
          <div class="label">提现户名</div>
          <el-input style="width: 240px" v-model="userFormData.withdrawName" placeholder="请输入账号名"></el-input>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel2">取消</el-button>
          <el-button type="primary" @click="handleOk2">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-form-item label="PDF扫描件" prop="enclosure">
        <div style="position: relative; display: flex">
          <input ref="uploadInputRef" class="ipt" type="file" @change="handleFileChange($event)" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import CommonApi from "@/api/common";
import MoneyApi from "@/api/money";
import Supplier from "@/api/supplier";

const props = defineProps<{}>();
const emit = defineEmits(["success"]);
const formRef = ref(null);
let supplierInfo = ref({
  withdrawAccount: "",
  withdrawName: "",
});
let userFormData = ref({
  withdrawAccount: "",
  withdrawName: "",
});
let formData = ref({
  id: "",
  enclosure: "",
});
const rules = reactive({
  withdrawStatus: [{ required: true, message: "请选择提现状态!" }],
});
const ifShow = ref(false);
const ifShow2 = ref(false);
let uploadInputRef = ref(null);

//修改账号
function handleUpdateAccount(title) {
  ifShow2.value = true;
}
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
const handleFileChange = (event: any) => {
  if (event.target.files[0].type !== "application/pdf") {
    ElMessage.warning("请上传pdf扫描件");
    return;
  }

  //请求阿里云拿到上传参数
  CommonApi.getOssParam({ fileType: 6 }).then((res) => {
    let data = {
      policy: res.result.policy,
      OSSAccessKeyId: res.result.accessId,
      signature: res.result.signature,
      success_action_status: res.result.success_action_status,
      key: res.result.key,
      name: res.result.name,
      file: event.target.files[0],
    };

    formData.value.enclosure = res.result.key;

    CommonApi.common(data, res.result.host, "post").then((res) => {});
  });
};

function edit(row: any) {
  CommonApi.getSupplier({ id: row.supplierId }).then((res) => {
    if (res.code == 0) {
      supplierInfo.value.withdrawAccount = res.result[0].withdrawAccount;
      supplierInfo.value.withdrawName = res.result[0].withdrawName;
    }
  });

  ifShow.value = true;
  if (uploadInputRef.value) {
    uploadInputRef.value.value = "";
  }

  Object.assign(formData.value, row);
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {
  let myMessage = `当前提现账号${supplierInfo.value.withdrawAccount}-提现账户名${supplierInfo.value.withdrawName},请仔细确认?`;
  ElMessageBox.confirm(myMessage, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await formRef.value.validate((valid, fields) => {
      if (valid) {
        let data = {
          id: formData.value.id,
          enclosure: formData.value.enclosure,
        };
        MoneyApi.uploadPdf(data).then((res) => {
          console.log("rererere", res);

          if (res.code == 0) {
            ElMessage.success(res.message);
            formRef.value.resetFields();
            emit("success");
            handleCancel();
          } else {
            console.log(res);

            ElMessage.error(res.message);
          }
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  });
}

function handleCancel2() {
  ifShow2.value = false;
}
function handleOk2() {
  ElMessageBox.confirm("确认修改吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    CommonApi.updateSupplierAccount(userFormData.value).then((res) => {
      if (res.code == 0) {
        ElMessage.success("提交成功,等待管理员审核");
        ifShow2.value = false;
      }
    });
  });
}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  formRef.value.resetFields();
  ifShow.value = false;
  ifShow2.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
:deep(.el-message-box__message) {
  width: 100px !important;
}
.box {
  // display: flex;
  align-items: center;
  margin-bottom: 16px;
  .item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    margin-right: 44px;
  }
}
.container {
  font-size: 16px;
  padding: 14px;
  .info {
    margin-top: 22px;
    .aud {
      margin-top: 14px;
      width: 38%;
    }
  }
}
</style>
